<template>
  <div class="box box-info hover-shadow">
    <div class="box-header ">
      <span>
        <strong class="sea_page_title margin-right">OpenAPI</strong>
        <a @click="copy">【复制】</a>
        <span>或者</span>
        <a @click="download">【下载】</a>
        <span>下列代码，导入 Postman 即可开始接口调试</span>
      </span>
      <a @click="reload" class="pull-right"><i class="fa fa-refresh"></i> 刷新</a>
    </div>
    <div class="box-body" v-loading="loading">
      <sea-code :text="code" type="json" :style="style"></sea-code>
    </div>
  </div>
</template>

<script>
import Layers from "@/lang/layers/index";
import FileUtils from "@/lang/commons/file-utils";

/**
 * postman 接口文档
 *
 * 对接后台 open-api 的接口
 */
export default {
    name: "index",
    data() {
        return {
            // 是否载入中
            loading: false,
            // 当前显示的代码
            code: '',
            // 代码框的样式，主要是为了去除滚动条
            style: ''
        }
    },
    created() {
        this.reload();
    },
    methods: {
        /**
         * 复制到剪切板
         */
        copy: function () {
            if (Layers.isEmpty(this.code)) {
                Layers.warn("无相关数据，可能是因为后台未启用此功能！");
            } else {
                FileUtils.writeTextToClipboard(this.code);
            }
        },
        /**
         * 下载当前界面的代码
         */
        download: function () {
            if (Layers.isEmpty(this.code)) {
                Layers.warn("无相关数据，可能是因为后台未启用此功能！");
            } else {
                FileUtils.downloadText('接口文档.json', this.code);
            }
        },
        /**
         * 重新载入代码
         */
        reload: function () {
            this.loading = true;
            // 设置高度
            this.style = 'overflow: auto;height:' + (document.body.clientHeight - 156) + 'px';
            Layers.ajax({
                url: '/sys/api/doc',
                method: 'GET',
                params: {}
            }).then((result) => {
                this.loading = false;
                if (result.code === 0) {
                    // 代码
                    this.code = JSON.stringify(result.data, null, 2);
                }
            }).catch(err => {
                this.loading = false;
            });
        }
    }
}
</script>

<style scoped>

</style>
